<template>
  <div class="table">
    <div class="item"
         v-for="item in data"
         :key="item.id">
      <div class="col" style="width:200px">
        <div style=";display: flex;">
           <div class="label"
             style="width:200px">{{item.updateTime}}</div>
        
        </div>
       
        <div class="value withimg">
          <div>
            <img src="@/assets/images/mt.png" style="">
            <span style="line-height: 26px;">
              <el-tooltip :content="tipsList(item).cnName"
                      placement="bottom" popper-class="testtooltip">
                      <span>{{ tipsList(item).cnName | subStr(5) }}</span>
              </el-tooltip>
              
            </span>
          </div>
          <div>
            {{ filteredList(item).title }}
          </div>
        </div>
      </div>
      <div class="col">
        <div class="label"
             style="width:150px">计划号</div>
        
          <span class="value">
            <span>{{item.planno}}</span>
          </span>
      </div>
      
      <div class="col">
        <div class="label"
             style="width:150px">状态</div>
        
          <span class="value">
            <span class="value1">
              <el-tooltip :content="item.reason"
                      placement="bottom"
                      popper-class="testtooltip" v-if="['R','F'].includes(item.planstatus)">
                      <span  :style="{color:planstatusList(item).color}">{{planstatusList(item).value}}</span>
              </el-tooltip>
              <span v-else :style="{color:planstatusList(item).color}">{{planstatusList(item).value}}</span>
            </span>
          </span>
      </div>
      <div class="col">
        <div class="label"
             style="width:150px">作业状态</div>

          <span class="value">
            <span class="value1">
              <span :style="{color:pstatusList(item).color}">{{pstatusList(item).value}}</span>
            </span>
          </span>
      </div>


      <!-- <div class="col">
        <div class="label"
             style="width:150px">船名航次</div>
        <div class="value">{{item.ivoyage}}/{{item.evoyage}}</div>
      </div>
      <div class="col">
        <div class="label">船舶动态</div>
        <div class="value">{{item.eta}}</div>
      </div> -->
      
      <div class="col">
        <div class="label" style="width:158px">船名</div>
        <div class="value">
          <el-tooltip :content="item.cnname" placement="bottom" popper-class="testtooltip">
            <span>{{item.cnname|subStr(8)}}</span>
          </el-tooltip>
        </div>
      </div>
      <div class="col">
        <div class="label"  style="width:120px">作业码头</div>
        <div class="value">
          <el-tooltip :content="tipsList(item).cnName"
                      placement="bottom" popper-class="testtooltip">
              <span>{{ tipsList(item).cnName | subStr(5) }}</span>
          </el-tooltip>
        </div>
      </div>
      <div class="col">
        <div class="label"
             style="width:110px">作业过程</div>
        <div class="value">{{ filteredList(item).name }}</div>
        <!-- <div class="value">{{item.intradeName}}</div> -->
      </div>
      <div class="col">
        <div class="label">计划开始时间</div>
        <div class="value"   style="width:160px">{{item.opsttm}}</div>
      </div>
      <div class="col" style="width: 200px;">
        
      </div>
      <div class="col fixed">
        <div class="label"
             style="width:200px">操作</div>
        <div class="value btns">
          <div>
            <div style="display: flex;">
              <el-button @click="handleClick(item,'see')"
                     type="text"
                     style="color: #1955CF">查看详情</el-button>
              <el-button @click="handleClick(item,'delete')"
                     type="text"
                     style="color: #1955CF">作废</el-button>
                     <el-button @click="handleClick(item,'edit')"
                     type="text"
                     style="color: #1955CF" v-if="['P','R','F'].includes(item.planstatus) && (item.cstCstmcd===perCd)">编辑</el-button>
                     <el-button @click="delTable(item)"
                     type="text"
                     style="color: #1955CF" v-if="['P','R','F'].includes(item.planstatus) && (item.cstCstmcd===perCd)">取消</el-button>
            </div>
            <div style="display: flex;">
              <el-button @click="$emit('carPlan',item,perCd)"
                     type="text" v-if="['XCZT_G','ZCZZ_G','JH_G','TH_G'].includes(item.planTag)"
                                style="color: #1955CF" >车队计划</el-button>
                     <el-button @click="$emit('driverCertificate',item,item.flag)"
                     type="text"  v-if="['XCZT_G','ZCZZ_G','JH_G','TH_G'].includes(item.planTag) && item.flag != '0'"
                     style="color: #1955CF" >{{item.flag != '0' ?'查看凭证':'生成二维码'}}</el-button>
            </div>
            <!-- v-if="'P'===item.pstatus && ['XCZT_G','ZCZZ_G','JH_G','TH_G'].includes(item.planTag) && !(['N'].includes(item.planstatus))"
             v-if="'P'===item.pstatus && ['XCZT_G','ZCZZ_G','JH_G','TH_G'].includes(item.planTag)" -->
          </div>
        </div>
      </div>
      <el-dialog title="" :visible.sync="deleteShow">
      <div>
        <div class="box-title" style="margin-bottom: 20px;">作废</div>
        <el-form :model="deleteForm" label-width="120px" >
          <el-form-item label="作废原因">
            <el-input style="width: 220px;"  size="small" type="text" v-model="deleteForm.invalidReason"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer"
          class="dialog-footer">
      <el-button @click="deleteConfirm" >保存</el-button>
      <el-button type="primary"
                 @click="deleteShow = false">取消</el-button>
    </span>
    </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myTable',
  props: ['data','termList'],
  components: {},
  data() {
    return {
      perCd:JSON.parse(localStorage.getItem('userInfo')).customerCode,
      pstatus:[
        {label:'PLAN',key:"P", value:"计划",color:'#333333'},
        {label:'WORKING',key:"W", value:"作业中",color:'#13D55C'},
        {lebel:'FINISH',key:"C",value: "完成",color:'#F56C6C'},
        {label:'CANCEL',key:"N",value:"取消",color:'#DDDDDD'}
      ],

      planstatus:[
       { key:'P',value:'初始',color:'#1075FF'},
       { key:'M',value:'待确认',color:'#13D55C'},
       { key:'W',value:'待审核',color:'#333333'},
       { key:'R',value:'审核不通过',color:'#FF3838'},
       { key:'A',value:'审核通过',color:'#F56C6C'},
       { key:'S',value:'下发成功',color: '#043AA7'},
       { key:'F',value:'下发失败',color:'#00BAFF'},
       { key:'Y',value:'已支付',color:'#00BAFF'},
       { key:'N',value:'取消',color:'#DDDDDD'},
       // 新添加状态
       { key:'BC',value:'计划取消中',color:'#00BAFF'},
       { key:'OC',value:'计划取消中',color:'#00BAFF'},
       { key:'BCF',value:'计划取消失败',color:'#FF3838'},
       { key:'OCF',value:'计划取消失败',color:'#FF3838'},
       { key:'BCS',value:'计划取消成功',color:'#043AA7'},
       { key:'OCS',value:'计划取消成功',color:'#043AA7'},
      ],
      // planstatus:{
      //   P:'初始',
      //   M:'待确认',
      //   W:'待审核',
      //   R:'审核不通过',
      //   A:'审核通过',
      //   S:'下发成功',
      //   F:'下发失败',
      //   Y:'已支付',
      //   N:'取消'
      // },
      listP:[
            {
              title: '卸船直提',
              name: '船--车',
              path: 'XCZT_G',
            },
            {
              title: '卸船入库',
              name: '船--场',
              path: 'XCRK_G',
            },
            {
              title: '装船直装',
              name: '车--船',
              path: 'ZCZZ_G',
            },
            {
              title: '装船出库',
              name: '场--船',
              path: 'ZCCK_G',
            },
            {
              title: '进货',
              name: '车--场',
              path: 'JH_G',
            },
            {
              title: '提货',
              name: '场--车',
              path: 'TH_G',
            },
          ],
      tips:this.termList,
      methodsTag:[
        {
          name:'',
          query:'',
          path:''
        },
      ],
      colors: [

      ],
      planTag:[
      { title: '全部状态', value: null },
      {
              title: '卸船直提',
              name: 'jUnloadLift',
              value: 'XCZT_G',
              
            },
            {
              title: '卸船入库',
              name: 'jUnloadIn',
              value: 'XCRK_G',
            },
            {
              title: '装船直装',
              name: 'jLoadLift',
              value: 'ZCZZ_G',
            },
            {
              title: '装船出库',
              name: 'jLoadIn',
              value: 'ZCCK_G',
            },
            {
              title: '进货',
              name: 'jImport',
              value: 'JH_G',
            },
            {
              title: '提货',
              name: 'jOutput',
              value: 'TH_G',
            },      
            

      ],
      deleteShow:false,
      deleteForm:{
        invalidReason:'',
        planno:'',
      },
    }
  },
  watch:{

  },
  methods: {
    planstatusList(item) {
      let c =  this.planstatus.filter(item1 =>{return item.planstatus===item1.key});
      if(c.length>0){
        return c[0]
      }else{
        return {}
      }
    },
    pstatusList(item) {
      let c =  this.pstatus.filter(item1 => item.pstatus===item1.key);
      if(c.length>0){
        return c[0]
      }else{
        return {}
      }
    },
    tipsList(item) {
      let c =  this.termList.filter(item1 => item1.termCode === item.termCode);
      if(c.length>0){
        return c[0]
      }else{
        return {}
      }
    },
    filteredList(item) {
      let c =  this.listP.filter(item1 => item.planTag === item1.path);
      if(c.length>0){
        return c[0]
      }else{
        return {}
      }
    },
    delTable(e){
      let that=this
      this.$confirm('确定要删除计划吗？')
          .then(_ => {
            that.$api.planCancel([e.planno]).then(res=>{
              if(200===res.code){
                this.$message.success('删除成功')
                this.$emit('delInfo')
              }else{
                this.$message.error(res.message)
              }
            }).catch(res=> {
              this.$message.error(res.message)
            })

          })
          .catch(_ => {});

    },
    handleClick(row,e) {
      console.log(row);
      //this.dialog=true
      if('edit'==e){
        this.title='编辑'
        this.see=false
      this.link(row,e)
      }else if('see'== e){
        this.title='查看'
        this.see=true
      this.link(row,e)
      }else if('delete'== e){
        console.log('嗯，是我',row)
        this.deleteForm.invalidReason = '',
        this.deleteForm.planno = row.planno
        this.deleteShow = true
      }
      //localStorage.setItem('myDate',JSON.stringify(row))
      // this.link(row,e)
    },
    deleteConfirm(){
      this.$api.deleteOrder(this.deleteForm).then(res=>{
        this.deleteShow = false
        this.$message.success('作废成功！')
      })
    },
    link(row,e){
      let c=''
      //let that=this
      this.planTag.forEach(element => {
        if(row.planTag===element.value){
          c=element
        }
      });
      let par={
        name:c.name,
        query:{
          state:e,
          type:c.key,
          id:row.id
        }
      }
      if('see'===e){
        let {href} = this.$router.resolve(par)
        window.open(href,'_blank')
      }else{
        this.$router.push(par)
      }
    },
    edit(item) {
      this.$router.push({
        name: 'addPlan',
        query: {
          scdType: item.scdType,
          id: item.id,
        },
      })
    },
    del(id) {
      this.$emit('del', id)
    },
    // handleClick(row,e) {
    //   console.log(row);
    //   //this.dialog=true
    //   if('see'!==e){
    //     this.title='编辑'
    //     this.see=false
    //   }else{
    //     this.title='查看'
    //     this.see=true
    //   }
    //   localStorage.setItem('myDate',JSON.stringify(row))
    //   this.link()
    // },
    // link(){
    //   this.$router.push({
    //     name: 'addPlan',
    //     query: {
    //       scdType: item.scdType,
    //       id: item.id,
    //     },
    //   })
    // },
  },

  computed: {},

  mounted() {},
}
</script>
<style lang='scss' scoped>
.table {
  overflow-x: auto;
  //min-height: 800px;
}
.item {
  display: flex;
  margin-top: 20px;
  width: auto;
  line-height: 50px;
  .fixed {
    position: absolute;
    right: 14px;
    border-left: 1px solid #ebeef5;
    box-shadow: -3px 0px 10px #ebeef5;
    background-color: #fff;
  }
  .col {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    .label {
      height: 33px;
      background: #f5f5f5;
      font-size: 14px;
      font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .value {
      height: 70px;
      border: 1px solid #e5e5e5;
      border-left: 0;
      display: flex;
      align-items: flex-start;
      padding:  10px;
      box-sizing: border-box;
      font-size: 14px;
      font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
      font-weight: 400;
      color: #000000;
    }
    .value1 {
      //margin-top: 20px;
      width: 100px;
      height: 23px;
      line-height: 23px;
      background: #F4F4F5;
      text-align: center;
      margin-top: 10px;
      margin-left: 20px;
      border-radius: 10px 10px 10px 10px;
    }
    .btns {
      display: flex;
      // align-items: center;
      // flex: 1;
      //line-height: 10px;
      button {
        font-size: 14px;
        margin-left: 5px;
        line-height: 0px;
      }
    }
    img {
      width: 30px;
      height: 27.95px;
    }
    .withimg {
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
      }
    }
  }
}
.circle {
  display: flex;
  align-items: center;
  span:first-child {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
.box-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 16px;
  line-height: 20px;
  padding-left: 10px;
  border-left: 5px solid #4980d5;
  margin-bottom: 10px;
}
:deep.el-dialog__footer {
  text-align: center;
  .el-button {
    color: #fff;
    background: #0f47b8;
    height: 30px;
    width: 100px;
    padding: 5px 10px;
  }
}
</style>